<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户登录</title>
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/login.css">
</head>

<body>   
    <!-- 导航栏 -->
    <div class="nav">
        <!-- logo -->
        <img src="./images/logo_003.jpg" alt="">
        <div class="content">
            <span>我的博客系统</span>
        </div>
    </div>
    <!-- 登录框 -->
    <div class="login-container">
        <!-- <form action="./blog_list.html" method="get"> -->
            <div class="dialog">
                <div class="title">用户登录</div>
                <div class="row">
                    <span>用户名</span>
                    <input type="text" id="username" name="username">
                </div>
                <div class="row">
                    <span>密码</span>
                    <input type="password" id="password" name="password">
                </div>
                <div class="row">
                    <input type="button" class="btn_submit" id="btn_login_submit" value="提交">
                </div>
            </div>
        <!-- </form> -->
    </div>
</body>

 <!-- 引入jquery -->
<script src = "./js/jquery-3.6.3.min.js"></script> 
<script>
    // 实现功能1：登录
    // <!-- 在页面加载完成之后再执行jS，目的是保证元素已经初始化成功后再执行后续操作 -->   
    $(function(){
        //4、为登录按钮绑定事件
        $('#btn_login_submit').click(function(){
            //1、获取控件输入的用户名和密码：id选择器
            let usernameEl = $('#username');
            if(!usernameEl.val()){
                alert('用户名不能为空');
                //让用户名输入框获得焦点
                usernameEl.focus();
                return;
            }
            //获取输入的密码并做校验
            let passwordEl = $('#password');
            if(!passwordEl.val()){
                console.log(passwordEl.val());
                alert('请输入密码');
                passwordEl.focus();
                return;
            }
            //2、构造要给后端发送的数据
            let postData = {
                username : usernameEl.val(),
                password : passwordEl.val()
            };
            //3、发送ajax请求
            $.ajax({
                type:'post',
                url: 'login',
                contentType:'application/x-www-form-urlencoded',
                data : postData,
                //成功回调
                success : function(respData){
                    if(respData.code == 0){
                        //登录成功,跳转到博客页面                      
                        location.assign('blog_list.html');
                    }else{
                        //登录失败
                        alert(respData.message);
                    }
                },
                //回调失败
                error : function(){
                    console.log('访问出现问题');
                }
            });
        });
    })
</script>
</html>